<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="images/favicon.ico" rel="shortcut icon" >
<link href="css/jquery.toastmessage-min.css" rel="stylesheet"/>
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/jquery.toastmessage-min.js"></script>
<script src="js/json2.js"></script>
</head>
<body>

<div id="topdiv">
已读： <span id="readseq">$readseq</span>  / $totolimagenum   <span id="console"></span>
</div>




<table style="margin:20px 0px;">
    #foreach($image in $imagelist)
    <tr>
        <td><img src="$image.webpath" width="850px"><td>
        <td style="vertical-align:middle color:#666">
       		<span id="seq">$image.seq</span><br>
        	<a class="imageoperation" seq="$image.seq" image="$image.webpath" action="top"><span class="firstchar">T</span><br>TOP</a><br>
            <a class="imageoperation" seq="$image.seq" image="$image.webpath" action="good"><span class="firstchar">G</span><br>GOOD</a><br>
            <a class="imageoperation" seq="$image.seq" image="$image.webpath" action="normal"><span class="firstchar">N</span><br>NORMAL</a><br>
            <a class="imageoperation" seq="$image.seq" image="$image.webpath" action="read"><span class="firstchar">R</span><br>READ</a><br>
        </td>
    </tr>
    #end
</table>

<a class="nextpage" href="/hezi/piclocal?lastseq=$lastseq">NEXT PAGE (read @ $lastseq)</a>
<a href="/hezi/piclocal?lastseq=0">CLEAR 0</a>
</body>



<script language="javascript">
$(function(){
	
	$(".imageoperation").click(function(){
		var seq = $(this).attr("seq");
		var action = $(this).attr("action");
		var image = $(this).attr("image");
		
		$.post('/hezi/piclocal',{seq: seq, 
								action:action,
								image:image
								},function(theback)
			  {
				console.log("back:" + theback);
				$("#readseq").html(theback);
				$("#console").html(seq + action + image);
			  }
		);
		
		$(this).remove();
	});		
	
	

})
</script>



<style>
#topdiv{
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	background-color:#000;
	color:#FFF;
}
#seq{
	margin:10px;
	font-size:60px;
}
span.firstchar{
	margin:10px;
	font-size:30px;
}
a.imageoperation{
	display:block;
	//border:#999 1px dotted;
	width:100px;
	padding:20px auto;
	cursor:pointer;
	margin-top:20px;
	text-align:center;
}
a.nextpage{
	cursor:pointer;
	display:block;
	text-align:center;
	//border:#999 1px dotted;
	width:100%;
	font-size:40px;
	padding:20px auto;
	text-decoration:none;
	margin-top:100px;
	margin-bottom:100px;
	color:#666;
}
td{
	vertical-align:top;
	//border:#000 1px solid; 
	padding:4px
}
</style>
</html>
